<template>
	<view class="main">
		<!-- <uni-search-bar @input="search" placeholder="搜索昵称" bgColor="#fff" /> -->
		<view style="background: white;margin-bottom: 1rpx;">
			<u-tabs :list="list1" @click="click" :scrollable="false"></u-tabs>
		</view>
		<view class="flex align tabs">
			<view :class="act==0?'act':''" @click="toAct(0)">全部</view>
			<view :class="act==1?'act':''" @click="toAct(1)">按粉丝数排序</view>
			<view :class="act==2?'act':''" @click="toAct(2)">按等级排序</view>
		</view>
		<view>
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class=" flex between">
					<image src="../../static/images/mine/head.png"></image>
					<view class="list-info" @click="toShow(index)">
						<view><text>昵称：{{item.user.douyin_message.nickname}}</text> </view>
						<view class="view" v-if="item.user.douyin_status==1">抖音粉丝数:
							<text>{{item.user.douyin_fans}}</text>（V{{item.user.douyin_level}}）
							<view>抖音号：{{item.user.douyin_message.appid}}</view>
						</view>
						<view class="view" v-if="item.user.kuaishou_status==1">快手粉丝数:
							<text>{{item.user.kuaishou_fans}}</text>（V{{item.user.kuaishou_level}}）
						</view>
						<view class="view" v-if="item.user.shipinhao_status==1">视频号粉丝数:
							<text>{{item.user.shipinhao_fans}}</text>（V{{item.user.shipinhao_level}}）
						</view>
						<view class="view" v-if="item.user.xiaohongshu_status==1">小红书粉丝数:
							<text>{{item.user.xiaohongshu_fans}}</text>（V{{item.user.xiaohongshu_level}}）
						</view>
						<view class="view" v-if="item.price!=''&&item.price!=null&&item.status==0">自报价：{{item.price}}</view>
						<view class="view" v-if="item.price!=''&&item.price!=null&&item.status==1">报价：{{item.price}}</view>
					</view>
				</view>
				<view class="list-btn flex align" v-if="item.status==0">
					<view @click="toSelect(2,item.id)">拒绝</view>
					<view @click="toSelect(1,item.id,item.price)">通过</view>
				</view>
				<view v-if="item.status==1" class="status1">已选中
				</view>
				<view v-if="item.status==2" class="status2">未选中</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="!empty" :content-text="loadText"></uni-load-more>
		<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
		<view class="showLody" v-if="show" @click="show = false"></view>
		<view class="sh-con" v-if="show">
			<view class="sh-con-tit">用户详情</view>
			<view class="items" v-if="userInfo.douyin_status==1">
				<view class="show-item">
					<view>应用：抖音</view>
				</view>
				<view class="show-item">
					<view>抖音号：{{userInfo.douyin_message.appid}}</view>
				</view>
				<view class="show-item">
					<view class="flex">抖音主页：<view class="copy" @click="toCopy(userInfo.douyin_message.homepage)">复制主页
						</view>
					</view>
					<view>{{userInfo.douyin_message.homepage}}</view>
				</view>
				<view class="show-item">
					<view>应用内二维码：</view>
					<image @click="toPre(userInfo.douyin_message.appqrcode)" :src="userInfo.douyin_message.appqrcode"
						style="width: 300rpx;height: 300rpx;"></image>
				</view>
			</view>
			<view class="items" v-if="userInfo.kuaishou_status==1">
				<view class="show-item">
					<view>应用：快手</view>
				</view>
				<view class="show-item">
					<view>快手号：{{userInfo.kuaishou_message.appid}}</view>
				</view>
				<view class="show-item">
					<view class="flex">快手主页：<view class="copy" @click="toCopy(userInfo.kuaishou_message.homepage)">复制主页
						</view>
					</view>
					<view>{{userInfo.kuaishou_message.homepage}}</view>
				</view>
				<view class="show-item">
					<view>应用内二维码：</view>
					<image @click="toPre(userInfo.kuaishou_message.appqrcode)"
						:src="userInfo.kuaishou_message.appqrcode" style="width: 300rpx;height: 300rpx;"></image>
				</view>
			</view>
			<view class="items" v-if="userInfo.shipinhao_status==1">
				<view class="show-item">
					<view>应用：视频号</view>
				</view>
				<view class="show-item">
					<view>视频号：{{userInfo.shipinhao_message.appid}}</view>
				</view>
				<view class="show-item">
					<view class="flex">视频号主页：<view class="copy" @click="toCopy(userInfo.shipinhao_message.homepage)">
							复制主页
						</view>
					</view>
					<view>{{userInfo.shipinhao_message.homepage}}</view>
				</view>
				<view class="show-item">
					<view>应用内二维码：</view>
					<image @click="toPre(userInfo.shipinhao_message.appqrcode)"
						:src="userInfo.shipinhao_message.appqrcode" style="width: 300rpx;height: 300rpx;"></image>
				</view>
			</view>
			<view class="items" v-if="userInfo.xiaohongshu_status==1">
				<view class="show-item">
					<view>应用：小红书</view>
				</view>
				<view class="show-item">
					<view>小红书号：{{userInfo.xiaohongshu_message.appid}}</view>
				</view>
				<view class="show-item">
					<view class="flex">小红书主页：<view class="copy" @click="toCopy(userInfo.xiaohongshu_message.homepage)">
							复制主页
						</view>
					</view>
					<view>{{userInfo.xiaohongshu_message.homepage}}</view>
				</view>
				<view class="show-item">
					<view>应用内二维码：</view>
					<image @click="toPre(userInfo.xiaohongshu_message.appqrcode)"
						:src="userInfo.xiaohongshu_message.appqrcode" style="width: 300rpx;height: 300rpx;"></image>
				</view>
			</view>
		</view>
		<view class="showPrice" v-if="showPrice">
			<view class="showContent">
				<view class="tit">选号</view>
				<view class="tit2"><text>*</text>是否更改报价（达人报价：￥{{price2}}）</view>
				<u-radio-group v-model="radiovalue1" placement="row">
					<u-radio :customStyle="{marginRight: '30rpx'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.value" @change="radioChange">
					</u-radio>
				</u-radio-group>
				<view v-if="is_change==1">
					<view class="tit2"><text>*</text>报价</view>
					<view class="flex align flex2" style="border-bottom: solid 1rpx gainsboro;">
						<text>￥</text>
						<input placeholder="请输入价格" v-model="price" type="number" />
					</view>
				</view>
				<view class="btns flex align between">
					<view @click="showPrice = false">取消</view>
					<view @click="toComfirm">确定</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		taskApplyListsCompany,
		taskApplyListsSelect
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				show: false,
				name: '',
				act: 0,
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				check_status: 1,
				title: '',
				task_id: '',
				douyin_fans_order: '',
				douyin_level_order: '',
				list1: [{
					name: '待选择',
				}, {
					name: '已选中',
				}, {
					name: '未选中'
				}],
				statusA: '0',
				userInfo: '',
				showPrice: false,
				price: '',
				price2: '',
				// 基本案列数据
				radiolist1: [{
						name: '不更改',
						disabled: false,
						value: 0
					},
					{
						name: '更改',
						disabled: false,
						value: 1
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				is_change: '-1',
				id: '',
				statusChange: '-1'
			};
		},
		onLoad(option) {
			this.task_id = option.id
			this.getlist()
		},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		methods: {
			radioChange(e) {
				console.log(e)
				this.is_change = e

			},
			toCopy(link) {
				uni.setClipboardData({
					data: link,
					success: () => {
						uni.showToast({
							title: '已复制',
							icon: 'success',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			toPre(img) {
				uni.previewImage({
					urls: [img],
					current: 0
				})
			},
			toShow(index) {
				this.show = true
				this.userInfo = this.list[index].user
			},
			click(e) {
				console.log(e)
				this.statusA = e.index
				this.page = 0
				this.list = []
				this.getlist()
			},
			toSelect(n, id,p) {
				this.statusChange = n
				this.id = id
				if (n == 2) {
					let that = this
					uni.showModal({
						title: "提示",
						content: "确定要拒绝吗？",
						showCancel: true,
						success: res => {
							if (res.confirm) {
								that.toCom()
							} else {

							}
						}
					})
				} else {
					this.price2 = p
					this.price = p
					this.showPrice = true
				}

			},
			toComfirm() {
				let that = this
				if(that.is_change=='-1'){
					uni.showToast({
						title:'请选择是否更改报价',
						icon:'none'
					})
					return false
				}
				if(that.is_change==1){
					if(that.price==''){
						uni.showToast({
							title:'请输入更改价格',
							icon:'error'
						})
						return false
					}
				}
				uni.showModal({
					title: "提示",
					content: "确定要通过吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							that.toCom()
						} else {

						}
					}
				})
			},
			async toCom() {
				let obj = {
					id: this.id,
					status: this.statusChange
				}
				if(obj.status==1){
					obj.price = this.price
					obj.is_change_price = this.is_change
				}
				const result = await taskApplyListsSelect(obj)
				let that = this
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					that.showPrice = false
					setTimeout(() => {
						that.page = 0
						that.list = []
						that.getlist()
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			search(e) {
				this.name = e
			},
			toAct(e) {
				this.act = e
				if (e == 0) {
					this.douyin_fans_order = ''
					this.douyin_level_order = ''
				}
				if (e == 1) {
					this.douyin_fans_order = 'asc'
				}
				if (e == 2) {
					this.douyin_level_order = 'asc'
				}
				this.page = 0
				this.list = []
				this.getlist()
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					title,
					task_id,
					douyin_level_order,
					douyin_fans_order,
					status,
					statusA
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					title,
					task_id: task_id,
					douyin_fans_order,
					douyin_level_order,
					status: statusA.toString()
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await taskApplyListsCompany(obj);
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						that.totalPage = Math.ceil(result.data.total / offset);
						console.log(that.list)
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.showPrice {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(45, 45, 45, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.showContent {
			background: white;
			width: 80%;
			padding: 30rpx;
			border-radius: 10rpx;

			.tit {
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
			}

			.tit2 {
				font-size: 30rpx;
				margin-bottom: 30rpx;
				margin-top: 30rpx;

				text {
					color: red;
				}
			}

			input {
				font-size: 30rpx;
			}
			.flex2{
				padding: 0 20rpx 20rpx;
			}

			.btns {
				padding: 60rpx 0 30rpx;

				view {
					width: 45%;
					line-height: 2;
					text-align: center;
					color: white;
				}

				view:nth-child(1) {
					background: gray;
				}

				view:nth-child(2) {
					background: #FF6543;
				}
			}
		}
	}

	.copy {
		color: white;
		font-size: 24rpx;
		text-align: center;
		border-radius: 12rpx;
		background: #2D2D2D;
		color: white;
		width: fit-content;
		padding: 8rpx 15rpx;
	}

	.status1 {
		color: green;
		width: 100%;
		text-align: right;
		font-size: 14px;
		font-weight: bold;
	}

	.status2 {
		color: red;
		width: 100%;
		text-align: right;
		font-size: 14px;
		font-weight: bold;
	}

	.showLody {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.459);
	}

	.sh-con {
		width: 90%;
		background: white;
		border-radius: 10rpx;
		font-size: 28rpx;
		max-height: 800rpx;
		overflow: auto;
		position: absolute;
		top: 200rpx;
		left: 5%;

		.sh-con-tit {
			text-align: center;
			font-weight: bold;
			margin: 10rpx 0 10rpx;
			font-size: 30rpx;
			padding: 20rpx 0 0 10rpx;
		}

		.show-item {
			margin-bottom: 20rpx;
		}

		.items {
			border-bottom: solid 1rpx gainsboro;
			margin-bottom: 20rpx;
			padding: 20rpx 30rpx;
		}
	}

	.tabs {
		font-size: 30rpx;
		font-weight: bold;
		background: white;
		justify-content: space-around;

		view {
			margin-right: 18rpx;
			position: relative;
			padding: 15rpx 0 20rpx;
		}

		.act::after {
			content: "";
			position: absolute;
			bottom: 0;
			width: 50%;
			left: 25%;
			height: 9rpx;
			background: #FF6543;
			border-radius: 5rpx;
		}
	}

	.list {
		background: white;
		margin: 20rpx;
		padding: 27rpx 30rpx;
		box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
		border-radius: 12rpx;

		image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
		}

		.list-info {
			width: 80%;
			margin-bottom: 20rpx;

			view:nth-child(1) {
				color: #2D2D2D;
				font-size: 28rpx;
				margin-bottom: 16rpx;

				text {
					font-weight: bold;
					font-size: 32rpx;
					margin-right: 21rpx;
				}
			}

			.view {
				color: #FF6543;
				font-size: 24rpx;
				margin-top: 6rpx;

				text {
					margin-left: 20rpx;
				}
			}
		}

		.list-btn {
			justify-content: space-around;
			margin-top: 30rpx;

			view {
				width: 260rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 12rpx;
				color: white;
			}

			view:nth-child(1) {
				margin-right: 20rpx;
				background: #E32900;
			}

			view:nth-child(2) {
				margin-right: 20rpx;
				background: #07C160;
			}
		}
	}
</style>